<!--
 * @Author: qm
 * @Date: 2020-12-02 12:00:00
 * @LastEditors: qm
 * @LastEditTime: 2020-12-02 12:00:00
 * @Description:
-->
<template>
  <div class="scanner">
    <van-nav-bar title="拣货扫描详情" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <van-form>
      <van-cell-group>
        <van-row type="flex" justify="center">
          <van-col span="6">
            <van-field v-model="formData.pickTaskCode" placeholder="拣货任务号" readonly />
          </van-col>
          <van-col span="6">
            <van-field v-model="formData.brandName" placeholder="品牌" readonly />
          </van-col>
          <van-col span="6">
            <van-field v-model="formData.businessType" placeholder="业务类型" readonly />
          </van-col>
          <van-col span="6">
            <van-field v-model="formData.shelvescomposeCode" placeholder="货架" readonly />
          </van-col>
        </van-row>
      </van-cell-group>
      <van-cell-group>
        <van-row type="flex" justify="center">
          <van-col offset="6" span="18">
            <van-row>
              <van-col span="22">
                <van-field is-link label="当前箱号" v-model="formData.cartonNo" @click="showCartonNos" />
                <van-action-sheet v-model="showCartonNo" :actions="cartonNoActions" @select="onCartonSelect" />
              </van-col>
              <van-col span="2">
                <van-icon :badge="cartonSum == 0 ? '' : cartonSum" />
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </van-cell-group>
    </van-form>
    <van-row v-if="pickTaskDetailData.length > 0" type="flex" justify="center">
      <van-col span="6">
        <van-cell title="商品" />
      </van-col>
      <van-col span="6">
        <van-cell title="库位" />
      </van-col>
      <van-col span="4">
        <van-cell title="数量" />
      </van-col>
      <van-col span="8">
        <van-cell title="拣货时间" />
      </van-col>
    </van-row>
    <div v-for="(item, index) in pickTaskDetailData.length > 10 ? pickTaskDetailData.slice(0, 10) : pickTaskDetailData" :key="index">
      <van-row type="flex" justify="center" align="center" class="pick-scan-list">
        <van-col span="6">
          <span>{{ item.sku }}</span>
        </van-col>
        <van-col span="6">
          <span>{{ item.locationCode }}</span>
        </van-col>
        <van-col span="4" class="text-center">
          <span>{{ item.pickQty }}</span>
        </van-col>
        <van-col span="8" class="text-center">
          <span>{{ item.createdDate }}</span>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {getCartonList, getPickLogByCarton} from "@/api/pickScan/pickTaskDetail";
import {formatNumberToDateTime} from "@/api/common/formatDateUtil";
export default {
  computed: {
    ...mapGetters("scanner", ["pdaScanData"]),
    ...mapGetters("user", ["userData"])
  },
  watch: {
    $route: {
      handler(route) {
        if (route.name === "b2cPickickScanDetail" && this.$root.storerWarehouseBrand === undefined) {
          this.$notify({type: "warning", message: "请重新登录，并设置货主、仓库、品牌!"});
          return;
        }
        if (route.name === "b2cPickickScanDetail" && this.$route.query.pickTaskCode === undefined) {
          this.$notify({type: "warning", message: "拣货任务号为空，请先回到拣货扫描页面!"});
          return;
        }
        if (route.name === "b2cPickickScanDetail" && this.$route.query.pickTaskCode !== undefined) {
          this.pickTaskId = this.$route.query.pickTaskId;
          this.orderType = this.$route.params.orderType;
          this.cartonNo = this.$route.params.cartonNo;
          this.skuCartonNo = this.$route.query.skuCartonNo;
          this.formData.pickTaskCode = this.$route.query.pickTaskCode;
          this.formData.brandName = this.$root.storerWarehouseBrand.brandName;
          this.formData.businessType = this.$route.query.bussinessType;
          this.formData.shelvescomposeCode = this.$route.query.shelvesName;
          this.getCartonLists();
        }
      }
    },
    deep: true
  },
  mounted() {
    if (this.$root.storerWarehouseBrand === undefined) {
      this.$notify({type: "warning", message: "请重新登录，并设置货主、仓库、品牌!"});
      return;
    }
    if (this.$route.query.pickTaskCode === undefined) {
      this.$notify({type: "warning", message: "拣货任务号为空，请先回到拣货扫描页面!"});
      return;
    }
    if (this.$route.query.pickTaskCode !== undefined) {
      this.pickTaskId = this.$route.query.pickTaskId;
      this.orderType = this.$route.params.orderType;
      this.cartonNo = this.$route.params.cartonNo;
      this.skuCartonNo = this.$route.query.skuCartonNo;
      this.formData.pickTaskCode = this.$route.query.pickTaskCode;
      this.formData.brandName = this.$root.storerWarehouseBrand.brandName;
      this.formData.businessType = this.$route.query.bussinessType;
      this.formData.shelvescomposeCode = this.$route.query.shelvesName;
      this.getCartonLists();
    }
  },
  data() {
    return {
      //拣货任务id
      pickTaskId: "",
      orderType: "",
      cartonNo: "",
      skuCartonNo: "",
      formData: {
        //拣货任务号
        pickTaskCode: "",
        //品牌
        brandName: "",
        //业务类型
        businessType: "",
        //货架
        shelvescomposeCode: "",
        //箱号
        cartonNo: "",
        cartonId: ""
      },
      cartonSum: 0,
      //控制箱号动作面板是否展示
      showCartonNo: false,
      //箱号动作面板数据展示的数组
      cartonNoActions: [],
      pickTaskDetailData: []
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: "b2cPickickScanHeader",
        params: {
          pickTaskCode: this.formData.pickTaskCode,
          pickTaskId: this.pickTaskId,
          skuCartonNo: this.skuCartonNo,
          orderType: this.orderType,
          cartonNo: this.cartonNo,
          cartonId: this.$route.params.cartonId,
          brandCode: this.$route.params.brandCode,
          bussinessType: this.formData.businessType,
          shelvesName: this.formData.shelvescomposeCode
        }
      });
    },
    //箱号下拉框数据查询方法
    getCartonLists() {
      getCartonList(
        this.$root.storerWarehouseBrand.storerId,
        this.$root.storerWarehouseBrand.warehouseId,
        this.$root.storerWarehouseBrand.brandId,
        this.pickTaskId,
        this.userData.sysUserLoginName
      ).then(response => {
        this.cartonNoActions = [];
        this.cartonSum = 0;
        this.formData.cartonId = "";
        this.formData.cartonNo = "";
        this.pickTaskDetailData = [];
        if (response.data.status) {
          if (response.data.data.length !== 0) {
            let data = {};
            for (let i = 0; i < response.data.data.length; i++) {
              data = {
                name: response.data.data[i].cartonNo,
                code: response.data.data[i].id
              };
              this.cartonNoActions.push(data);
            }
            this.cartonSum = Number(this.cartonNoActions.length);
            this.formData.cartonId = this.cartonNoActions[0].code;
            this.formData.cartonNo = this.cartonNoActions[0].name;
            this.onCartonSelect(this.cartonNoActions[0]);
          }
          this.$notify({type: "success", message: response.data.message});
        } else {
          this.$notify({type: "warning", message: response.data.message});
        }
      });
    },
    showCartonNos() {
      if (this.cartonNoActions.length == 0) {
        this.$toast.fail("数据为空!");
        return;
      }
      this.showCartonNo = true;
    },
    //选择箱号后的查询方法
    onCartonSelect(item) {
      this.showCartonNo = false;
      this.formData.cartonId = item.code;
      this.formData.cartonNo = item.name;
      getPickLogByCarton(
        this.$root.storerWarehouseBrand.storerId,
        this.$root.storerWarehouseBrand.warehouseId,
        this.$root.storerWarehouseBrand.brandId,
        this.pickTaskId,
        this.formData.cartonId
      ).then(response => {
        if (response.data.status) {
          this.pickTaskDetailData = response.data.data;
          for (let i = 0; i < response.data.data.length; i++) {
            this.pickTaskDetailData[i].createdDate = formatNumberToDateTime(this.pickTaskDetailData[i].createdDate);
          }
          this.$toast.success(response.data.message);
        } else {
          this.$toast.fail(response.data.message);
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.pick-scan-list {
  /deep/ .van-col {
    font-size: 14px;
    padding: 8px 4px;
    span {
      word-break: break-all;
      word-break: break-word;
    }
  }
  .text-center {
    text-align: center;
  }
}
</style>
